<template>
  <div id="back">
    <div id="bg">
      <div>
        <div id="welcome">
          <div id="hello">
            <span id="msg">{{ msg }}</span><br/>
            <span id="text">{{ text }}</span>
          </div>
        </div>
      </div>
      <div id="from">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" id="ruleForm">
          <el-form-item id="lable" label="用户名：" prop="username">
            <el-input id="input" placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item id="lable" label="密  码：" prop="password">
            <el-input id="input" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item id="lable" label="验证码：" prop="authcode">
            <el-input id="input" placeholder="请输入验证码" v-model="ruleForm.authcode"></el-input>
            <div class="code">
              <!-- <img src="../../assets/images/loginIcon.png" alt="" /> -->
              <img :src="captchaPath" alt="" @click="getCode()"/>
<!--              <el-button @click="getCode()">看不清？换一张</el-button>-->
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from '@/utils'
export default {
  name: 'login',
  data() {
    return {
      input: '',
      uuid:"",
      msg: 'Welcome',
      text: '欢迎来到后台管理系统',
      ruleForm: {
        username: '',
        password: '',
        authcode: '',
      },
      captchaPath:"",
      rules: {
        username: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        authcode: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  mounted() {
    this.getCode()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/fiction/login`),
            method: 'post',
            data: this.$http.adornData({
              'adUserName': this.ruleForm.username,
              'adUserPassword': this.ruleForm.password,
              'authcode': this.dataForm.authcode,
            })
          }).then((data) => {
            if (data && data.code === 200) {
              console.log(data)
              localStorage.setItem(data.token)
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCode() {
      this.uuid = getUUID()
      console.log("点击了此方法")
      this.captchaPath = this.$http.adornUrl(`/fiction/captchaJpg?uuid=${this.uuid}`)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#back {
  background: url("./images/photo.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

#bg {
  width: 45%;
  height: 50%;
  /* background: wheat; */
  margin: 15% auto;
}

#welcome {
  width: 40%;
  height: 551px;
  text-align: center;
  /* margin: 200px 0px 0px 0px; */
  float: left;
  background: white;
  opacity: 0.4;
  border-radius: 15px 0px 0px 15px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

#hello {
  margin: 195px 0px 0px 0px;
}

#msg {
  font-size: 50px;
  margin: 200px 0px 0px 0px;
}

#text {
  font-size: 30px;
  margin: 230px 0px 0px 0px;
}

#from {
  background: white;
  height: 551px;
  overflow: hidden;
  border-radius: 0px 15px 15px 0px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

#ruleForm {
  margin: 15% 10% 0 0;
}

#lable {
  font-size: 18px;
}

/* span{
margin: auto;
} */

/* #text{
float: left;
} */

/* #frotextm{
clear:both;
} */

/* .hello > #welcome{
top: 60%;
}
.bg{
width: 100%;
height: 65%;
}
.hello{
margin:10% auto;
background: white;
opacity: 0.5;
width: 25%;
height: 65%;
border-radius:20px;
/* box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}
#text{
/* float: left;
.input{
width: 60%;
} */
</style>
